<!-- 所有组件暂时存放页 -->
<template>
    <div class="box">
        <h1 class="flex-jcsb flex-aic">
            <span>table表格</span>
            <ExportBtn
                :title="'实时水质分析表' + $dayjs().format('YYYYMMDD HHmm')"
                :data="sortData"
                :header="tableHeader"
                excelStyle="stripe"
            />
        </h1>

        <ptt-table
            :data="data"
            :header="tableHeader"
            :merge="{
                type: 'row',
                props: ['DSMC'], // 需要合并的字段
                referProp: 'DSMC', // 被参考合并字段
                referMergeProps: ['$index', 'STLX'] // 参考referProp进行合并的字段
            }"
            @dataChange="dataChange"
            height="400px"
            style="width: 90%"
            conWidth="110%"
        >
            <template v-slot:$index="{ $index }">
                <div
                    class="cell flex-jcc"
                    :class="$index <= 3 ? 'ranking-icon' + $index : ''"
                >
                    {{ $index }}
                </div>
            </template>
            <template #SZZK="{ row }">
                <div
                    class="cell flex-aic flex-jcc"
                    style="height: 100%"
                    :style="{
                        'background-color': waterObj.setColor('DBS', row.SZZK)
                    }"
                >
                    {{ row.SZZK || '-' }}
                </div>
            </template>
            <template #BJ="{ row }">
                <div class="cell flex-aic flex-jcc">
                    <button
                        @click="
                            tableDetail = {
                                flag: true,
                                title: '表格详情（' + row.STMC + '）',
                                row: $handleStr.deepClone(row)
                            }
                        "
                        class="ptt-btn-small"
                    >
                        详情
                    </button>
                </div>
            </template>
            <template #empty> 数据装填中... </template>
        </ptt-table>
        <DragPop
            :dragDetail.sync="tableDetail"
            :showMask="false"
            onlyDragInside
            drag
            fullScreen
            adjustSize
            :lock-scroll="false"
            :popSize="{ width: '40%', height: '50%' }"
            :minSize="{ width: '30%', height: '40%' }"
        >
            <template #header>
                <div class="flex-jcsb flex-aic" style="width: 100%">
                    <p class="t">
                        {{ tableDetail.title }}
                    </p>
                    <img
                        @click="tableDetail.flag = false"
                        src="~@/assets/images/close.png"
                        alt=""
                        class="curp"
                        style="width: 22px; margin-right: 20px"
                    />
                </div>
            </template>
            <!-- 默认插槽是内部 -->
            <div style="color: #fff">
                <ul
                    class="flex-fdc"
                    style="
                        padding: 0 0 0 20px;
                        height: 200px;
                        justify-content: space-evenly;
                    "
                >
                    <li>
                        <span>地市名称：</span
                        ><span>{{ tableDetail.row.DSMC }}</span>
                        <button
                            @click="
                                mapPopDetail = {
                                    flag: true,
                                    title: tableDetail.row.DSMC + '地图'
                                }
                            "
                            class="ptt-btn-small"
                        >
                            查看地图定位
                        </button>
                    </li>
                    <li>
                        <span>水质状况：</span
                        ><span
                            :style="{
                                'background-color': waterObj.setColor(
                                    'DBS',
                                    tableDetail.row.SZZK
                                )
                            }"
                            >{{ tableDetail.row.SZZK }}</span
                        >
                    </li>
                    <li>
                        <span>超标数量：</span
                        ><input
                            type="number"
                            min="0"
                            max="100"
                            :value="tableDetail.row.CBSL"
                            @input="
                                e => {
                                    tableDetail.row.CBSL = e.target.value;
                                }
                            "
                        />
                    </li>
                    <li>
                        <span>超标率：</span
                        ><input
                            type="number"
                            min="0"
                            max="100"
                            :value="tableDetail.row.CBL"
                            @input="
                                e => {
                                    tableDetail.row.CBL = e.target.value;
                                }
                            "
                        />
                    </li>
                    <li>
                        <span>监测时间：</span
                        ><span>{{ tableDetail.row.JCSJ }}</span>
                    </li>
                </ul>
                <div
                    @click="
                        data.map((item, index, arr) => {
                            if (item.STMC == tableDetail.row.STMC) {
                                arr[index] = tableDetail.row;
                            }
                        });
                        tableDetail.flag = false;
                    "
                    class="ptt-btn"
                >
                    确定修改
                </div>
            </div>
        </DragPop>
        <DragPop
            v-model:dragDetail="mapPopDetail"
            drag
            fullScreen
            adjustSize
            :close-on-click-mask="true"
            :close-on-press-esc="true"
            :popSize="{ width: '50%', height: '60%' }"
        >
            <p style="height: 200px">
                <NoData data="" text="地图功能暂未开发，尽情期待"></NoData>
            </p>
        </DragPop>
    </div>
    <div class="box">
        <h1>轮播图</h1>
        <!-- <div style="background-color: #5d96c8; width: 250px">
            <ScrollPhoto :data="imgList" :intervalTime="2000" :height="250" />
        </div> -->
        <div class="aa" style="height: 200px; width: 200px; overflow: auto">
            <aa :data="imgList" :scrollSpeed="0.8" :idlerWheelSpeed="100">
                <div class="scroll-box">
                    <img
                        v-for="(item, idx) in imgList"
                        :key="idx"
                        :src="item.IMG"
                        alt=""
                    />
                </div>
            </aa>
        </div>
    </div>
    <div class="box">
        <h1>半环图</h1>
        <half-rings
            style="width: 200px"
            :value="ringVal"
            :text="ringText"
            :numColor="ringVal < 80 ? '#ff6f42' : '#1bd0f9'"
        />
    </div>
    <div class="box">
        <h1>弹框-可拖拽</h1>
        <button @click="dragDetail.flag = true">点我</button>

        <DragPop
            :dragDetail="dragDetail"
            onlyDragInside
            drag
            fullScreen
            adjustSize
            :initPos="{ top: '34%', left: '5%' }"
            :popSize="{ width: '40%', height: '50%' }"
            @close="dragDetail.flag = false"
        >
        </DragPop>
    </div>
    <div class="box">
        <h1>风向图</h1>
        <Wind :data="qxdata" style="width: 500px; height: 300px" />
    </div>
    <div class="box">
        <h1>echarts地图 -- 珠海市</h1>
        <pttMap :data="mapData" style="width: 500px; height: 400px" />
    </div>
</template>

<script setup>
import { onMounted, reactive, ref, toRefs, watch, computed, inject } from 'vue';
// 业务组件
import pttTable from '@/components/bussiness/table/vue2/Layout.vue';
import ScrollPhoto from '@/components/bussiness/scrollPhoto/vue3/Layout.vue';
import aa from '@/components/bussiness/scrollPhoto/vue3/aa.vue';
import ExportBtn from '@/components/bussiness/exportBtn/vue2/Layout.vue';
// echarts组件
import halfRings from '@/components/echarts/halfRings/vue3/Layout.vue';
import Wind from '@/components/echarts/wind/vue2/Layout.vue';
import pttMap from '@/components/echarts/eMap/vue2/ptt-map.vue';
// 布局组件
// import DragPop from '@/components/layout/pop/dragPop/vue3/DragPop.vue';
import DragPop from '@/components/layout/pop/dragPop/vue2/DragPop.vue';

// 数据
import { tableData } from '@/components/bussiness/table/data.js';
import { qxdata } from '@/components/echarts/wind/data.js';
import { mapData } from '@/components/echarts/eMap/data.js';

// 工具类
import waterObj from '@/utils/waterBussiness.js';

const props = defineProps({});
const state = reactive({
    tableHeader: [
        { label: '序号', prop: '$index', colWidth: '8%' },
        { label: '地市', prop: 'DSMC' },
        { label: '水体类型', prop: 'STLX' },
        { label: '水体名称', prop: 'STMC', colWidth: '15%' },
        { label: '超标数量', prop: 'CBSL', sort: 'none' },
        {
            label: '首要超标因子',
            prop: 'SYCBW',
            align: 'left',
            showTitle: true,
            colWidth: '200px'
        },
        { label: '水质状况', prop: 'SZZK' },
        {
            label: '超标率<br/> (%)',
            prop: 'CBL',
            sort: 'none'
        },
        { label: '监测时间', prop: 'JCSJ', colWidth: '15%' },
        { label: '编辑', prop: 'BJ' }
    ],
    data: [],
    sortData: [],
    imgList: [],
    ringVal: 0,
    ringText: '-',
    dragDetail: {
        flag: false,
        title: '可拖拽弹框',
        url: '//player.bilibili.com/player.html?aid=401621422&bvid=BV1ko4y1T7y3&cid=1143017456&page=1'
    },
    tableDetail: {
        flag: false,
        title: '表格详情'
    },
    mapPopDetail: {
        flag: false,
        title: '地图定位'
    }
});
const {
    tableHeader,
    data,
    sortData,
    imgList,
    ringVal,
    ringText,
    dragDetail,
    tableDetail,
    mapPopDetail
} = toRefs(state);
const $dayjs = inject('$dayjs');

// 模拟异步请求
setTimeout(() => {
    tableData.map((item, index) => (item.$index = index + 1));
    state.data = tableData;
    state.imgList = [
        { IMG: '/src/assets/images/qyq1.jpg' },
        { IMG: '/src/assets/images/qyq2.jpg' },
        { IMG: '/src/assets/images/qyq3.jpg' },
        { IMG: '/src/assets/images/qyq4.jpg' }
    ];
    state.ringVal = 86.57;
    state.ringText = '达标';
}, 500);

// table数据改变
const dataChange = function (val) {
    state.sortData = val;
};
</script>

<style lang="scss" scoped>
.scroll-box {
    // height: 200px;
    // width: 200px;
    img {
        // width: 100%;
        height: 200px;
        // 去掉img之间的间距
        vertical-align: top;
    }
}
</style>
